<template>
  <div>
    <MyHeader background="#18be8f" color="#fff" title="购物车案例"></MyHeader>
    <div class="main" style="padding: 45px 0 50px 0">
      <!--循环数组 向goods传入数据 -->
      <MyGoods v-for="obj in list" :key="obj.id" :gobj="obj"></MyGoods>
    </div>
    <!-- 接收全选框状态  再把list数组传到foot -->
    <MyFooter @changeAll="allfn" :arr="list"></MyFooter>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader";
import MyGoods from "./components/MyGoods";
import MyFooter from "./components/MyFooter";

export default {
  components: {
    MyHeader,
    MyGoods,
    MyFooter,
  },
  data() {
    return {
      // 存放数据的空数组
      list: [],
    };
  },
  // 请求数据
  created() {
    // $axios挂载到vue的原型上 所有的vue实例都可以访问
    this.$axios({
      url: "/api/cart",
    }).then((res) => {
      this.list=res.data.list  // 将数据存放进数组
    });
  },

  methods:{
    allfn(bool){
      // 所有小选框的状态和全选框一致
      this.list.forEach(p=> p.goods_state = bool)
    } 
  }


};
</script>

<style>
</style>